<script setup lang="ts">
import { Lock, UserFilled } from '@element-plus/icons-vue';
import type { FormInstance, FormRules } from 'element-plus';
import { ref } from 'vue';
import { useLoginStore } from '../../stores/userInfo'
import { useRouter } from 'vue-router';
import { dynamicRoutes } from '../../router/routes/'
// 路由跳转
const router = useRouter()
// pinia 存储的用户信息
const userInfo = useLoginStore()
// 登录表单实例
const loginFormRef = ref<FormInstance>()
// 表单初始内容
const loginFormModel = ref({
    useraccount: '',
    password: ''
})
// 表单校验规则
const loginFormRules = ref<FormRules<typeof loginFormModel>>({
    useraccount: [
        { type: 'string', required: true, message: '账号是必填项', trigger: 'blur' },
        { min: 5, max: 12, message: '账号长度为5-12位', trigger: 'change' }
    ],
    password: [
        { type: 'string', required: true, message: '密码是必填项', trigger: 'blur' }
    ]
})
// 登录
const handleLoginSubmit = (FormEl: FormInstance | undefined) => {
    if (!FormEl) return
    FormEl.validate((vaild: boolean) => {
        if (vaild) { //这里其实是去调用后端接口去验证账号密码是否正确。如果正确跳转到home页面
            if (loginFormModel.value.useraccount === 'admin' && loginFormModel.value.password === 'admin') {
                // 模拟添加权限
                userInfo.changeAuthority(true)
                // 添加动态路由
                dynamicRoutes.forEach((item) => {
                    router.addRoute(item)
                })
                ElMessage.success("登录成功")
                router.replace("/dashboard")
                // console.log(router.getRoutes());
            } else {
                ElMessage.error("账号或密码错误")
                return
            }
        } else {
            //@ts-ignore
            ElMessage.error('未通过校验规则')
            return
        }
    })
}
// tips： 按下回车登录，在el-form表单上绑定以下属性之一即可
// v-on:keydown.enter="onKeydownEnter"
// @keydown.enter="onKeydownEnter"
</script>
<template>
    <div class="login_container">
        <el-card class="login-card">
            <template #header>
                <div class="login-card-header">
                    <h2>Login</h2>
                </div>
            </template>
            <el-form ref="loginFormRef" :model="loginFormModel" :rules="loginFormRules"
                v-on:keydown.enter="handleLoginSubmit(loginFormRef)">

                <el-form-item prop="useraccount">
                    <el-input :prefix-icon="UserFilled" placeholder="请输入账号" clearable
                        v-model.trim="loginFormModel.useraccount">
                    </el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input type="password" :prefix-icon="Lock" maxlength="16" placeholder="请输入密码"
                        v-model.trim="loginFormModel.password">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" style="width: 100%;border-radius: 7px;"
                        @click="handleLoginSubmit(loginFormRef)">登录</el-button>
                </el-form-item>

            </el-form>
        </el-card>
    </div>
</template>

<style scoped>
body {
    padding: 0;
    margin: 0;
}

.login_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 50;
    background-color: transparent;
    /* background-image: url('../../assets/images/login.jpg'); */
    /* background-repeat: no-repeat; */
    /* background-size: 100%; */

}

.login-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    background-color: transparent;
    border-radius: 15px;
    box-shadow: 0px 17px 26px 5px #0c0d0e4d;
}

.login-card-header {
    text-align: center;
}
</style>
